<template>
<div class="cb-container login-bg">
    <div class="login-form-box">
      <div class="title">琛贝管理平台</div>
      <div class="login-form">
        <div class="tab-header">
          <div :class="{'tab-active': adminUserLogin.mode === 1}" @click="switchMode(1)">账号登陆</div>
          <div :class="{'tab-active': adminUserLogin.mode === 2}" @click="switchMode(2)">验证码登陆</div>
        </div>
        <div class="tab-main">
          <el-form v-if="adminUserLogin.mode === 1" :model="adminUserLogin" size="large">
            <el-form-item prop="loginName">
              <el-input v-model="adminUserLogin.loginName" placeholder="请输入账号/邮箱/手机号"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" v-model="adminUserLogin.password" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <el-row :gutter="4">
              <el-col :span="14">
                <el-form-item prop="code">
                  <el-input placeholder="请输入验证码" maxlength="4" v-model="adminUserLogin.code" @keyup.enter="doLogin"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-image @click="refreshCaptcha" :src="adminUserLogin.captchaContent" style="height: 30px; width: 100px;" />
              </el-col>
            </el-row>
            <el-form-item>
              <el-button type="primary" style="width: 100%" @click="doLogin">登陆</el-button>
            </el-form-item>
          </el-form>
          <el-form v-if="adminUserLogin.mode === 2" :model="adminUserLogin" size="large">
            <el-form-item prop="loginName">
              <el-input v-model="adminUserLogin.loginName" placeholder="请输入/邮箱/手机号" clearable></el-input>
            </el-form-item>
            <el-row :gutter="4">
              <el-col :span="14">
                <el-form-item prop="code">
                  <el-input placeholder="请输入验证码" maxlength="4" v-model="adminUserLogin.code"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-button :type="btnType" @click="doSendCode" >{{ btnText }}</el-button>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button type="primary" style="width: 100%" @click="doLogin">登陆</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
</div>
</template>

<script setup>
import { ref, onMounted } from "vue"
import { useRouter } from "vue-router"
import { GetCaptcha, Login } from "@/api/login"
import { useAdminUserStore } from "@/store/adminUser"

defineOptions({
  name: '/login'
})

const router = useRouter()

let adminUserLogin = ref({
  mode: 1,
  loginName: "",
  password: "",
  code: "",
  captchaKey: "",
  captchaContent: ""
})

let btnText = ref("发送验证码")
let btnType = ref("primary")

/**
 * 请求验证码图片
 */
const resetCaptcha = () => {
  GetCaptcha().then(resp => {
    adminUserLogin.value.captchaKey = resp.data.key
    adminUserLogin.value.captchaContent = resp.data.content
  })
}

onMounted(() => {
  resetCaptcha()
})

/**
 * 切换登陆方式
 * @param mode
 */
const switchMode = (mode) => {
  adminUserLogin.value.mode = mode
}

/**
 * 刷新验证码图片
 */
const refreshCaptcha = () => {
  resetCaptcha()
}

/**
 * 发送验证码
 */
const doSendCode = () => {
  if (btnText.value === '发送验证码') {
    let countdown = 60
    btnType.value = "info"
    let countdownTimer = setInterval(() => {
      countdown--
      if (countdown === 0) {
        btnText.value = "发送验证码"
        btnType.value = "primary"
        clearInterval(countdownTimer)
      } else {
        btnText.value = countdown + "秒在获取"
      }
    }, 1000)
  }
}

/**
 * 登陆
 */
const doLogin = () => {
  if (import.meta.env.VITE_APP_MODE === 'static') {
    router.replace("/")
  } else {
    Login(adminUserLogin.value).then(res => {
      useAdminUserStore().setToken(res.data)
      router.replace("/")
    }, (err) => {
      if (err.code !== 'ERR_NETWORK') {
        refreshCaptcha()
        adminUserLogin.value.code = ''
      }
    })
  }
}

</script>

<style scoped>
.cb-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: right;

  .login-form-box {
    width: 50vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .title {
      text-align: center;
      font-weight: bold;
      font-size: 28px;
      margin-bottom: 16px;
      color: #FFFFFF;
    }

    .login-form {
      width: 368px;
      background: #fff;
      border-radius: 6px;
      box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);

      .tab-header {
        display: flex;
        flex-direction: row;
        font-size: 16px;
        font-weight: bold;
        justify-content: space-around;

        &>div{
          background: #f5f5f6;
          flex-grow: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 48px;
          color: rgba(37, 38, 43, 0.36);
          cursor: pointer;
        }
        &>div:first-of-type {
          border-top-left-radius: 6px;
        }
        &>div:last-of-type {
          border-top-right-radius: 6px;
        }

        & .tab-active {
          background: #ffffff;
          color: #25262b;
        }
      }

      .tab-main {
        padding: 16px;
      }
    }
  }
}
.login-bg {
  height: 100vh;
  background: url("@/assets/images/login_page_bg.jpg") 50% fixed no-repeat;
  background-size: cover;
}
</style>
